<template>
  <div class="departments">
    <el-card class="mycard">
      <!-- tabs 结构 -->
      <el-tabs>
        <el-tab-pane label="组织结构"></el-tab-pane>
      </el-tabs>
      <!-- 结构架构 -->
      <div class="box">
        <!-- 结构头部 -->
        <treetools
          @changeAddShow="openAdd"
          :istop="true"
          :item="topitem"
        ></treetools>
        <hr />
        <el-tree :data="list" default-expand-all>
          <!-- slot-scope 用来得到数据源，就是当前行的数据 -->
          <treetools
            @refreshData="getDepartment"
            @changeAddShow="openAdd"
            @changeEditShow="openEdit"
            slot-scope="{ data }"
            :item="data"
          ></treetools>
        </el-tree>
      </div>
    </el-card>
    <!-- <addpanel
      :addshow="addshow"
      :currentObj="currentObj"
      @closepanel="val => (addshow = val)"
      @updateList="getDepartment"
    ></addpanel> -->
    <!-- <addpanel
      :addshow="addshow"
      @update:addshow="val => (addshow = val)"
      :currentObj="currentObj"
      @updateList="getDepartment"
    ></addpanel> -->
    <addpanel
      ref="addpanle"
      :addshow.sync="addshow"
      :currentObj="currentObj"
      @updateList="getDepartment"
    ></addpanel>
  </div>
</template>

<script>
// 导入 api
import { getDepartmentApi } from '@/api/departments.js'
export default {
  data () {
    return {
      // 设置给头部的数据源
      topitem: {
        label: '传智教育'
      },
      // 组织架构的数据源
      list: [],
      // 控制新增面板的显示与隐藏
      addshow: false,
      // 当前操作的部门对象
      currentObj: {}
    }
  },
  methods: {
    // 打开编辑面板
    openEdit (item) {
      // 打开编辑面板
      this.addshow = true
      // 保存当前操作的部门对象
      this.currentObj = item
      // 调用子组件中的方法：来根据 id 得到当前部门对象
      this.$refs.addpanle.getItem(item.id)
    },
    // 打开新增面板
    openAdd (item) {
      this.addshow = true
      // 保存当前操作的部门对象
      this.currentObj = item
    },
    // 获取组织架构数据
    async getDepartment () {
      // 发送网络请求
      const res = await getDepartmentApi()
      // res.data.depts 中的数据不是树状结构，我们需要进行转换条件（父 id = 子 pid）
      // 保存数据源
      this.list = this.trunData(res.data.depts, '')
      // 保存顶部数据
      this.topitem = { ...res.data.depts[0], manager: '负责人' }
    },
    // 定义一个转换数据的方法
    trunData (arr, pid) {
      // 定义一个数组 能用 const 不用 let ，能用 let 不用 var
      var newarr = []
      arr.forEach(item => {
        if (item.pid === pid) {
          var children = this.trunData(arr, item.id)
          if (children.length > 0) {
            item.children = children
          }
          newarr.push(item)
        }
      })
      // 返回数组
      return newarr
    }
  },
  components: {
    treetools: () => import('./components/tree-tools.vue'),
    addpanel: () => import('./components/addpanel.vue')
  },
  created () {
    // 获取组织架构数据
    this.getDepartment()
  }
}
</script>

<style lang="scss" scoped>
.departments {
  margin: 20px;
  .mycard {
    padding: 20px;
  }
  .box {
    width: 90%;
    margin: 0 auto;
    margin-top: 50px;
  }
}
</style>
